/* 单选框,复选框 */
<template>
  <div class="radio-checkbox-config">
    <!-- <je-form-item label="回显过滤字段">
      <je-select v-model:value="formState.pkName" :options="options.nodeField"></je-select>
    </je-form-item> -->
    <je-form-item name="queryField">
      <template #label>
        <div class="iconWrap">
          <i class="fas fa-question-circle" @click="clickTipView" />
          快查字段
        </div>
      </template>
      <je-select v-model:value="formState.queryField" :options="options.queryField"></je-select>
    </je-form-item>

    <je-form-item label="快查取值字段" name="nodeField">
      <je-select v-model:value="formState.nodeField" :options="options.nodeField"></je-select>
    </je-form-item>

    <je-form-item label="布局方式" name="layoutStyle">
      <je-select v-model:value="formState.layoutStyle" :options="options.layoutStyle"></je-select>
    </je-form-item>
    <je-form-item v-if="formState.layoutStyle == 'gridLayout'" label="展示列数" name="showCloum">
      <je-select
        v-model:value="formState.showCloum"
        :options="options.gridLayoutConfig"
      ></je-select>
    </je-form-item>

    <!-- <je-form-item label="数字提醒" name="useBadge">
      <je-switch v-model:value="formState.useBadge" mode="checkbox" />
      <span class="prompt">行数统计，配置为快速查询项时候起效。</span>
    </je-form-item> -->

    <!-- <je-form-item label="级联数字提醒">
      <je-input v-model:value.trim="formState.cascadeUseBadge" />
    </je-form-item> -->
  </div>
</template>
<script>
  import { defineComponent, watch, reactive } from 'vue';
  import { Form, Select, Modal } from '@jecloud/ui';
  import { decode, isNotEmpty, isEmpty } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import { FORM_FILTER_REDIOCHECKBOX_CONFIG } from '@/helper/tip-constant';

  export default defineComponent({
    name: 'RadioCheckboxConfig',
    components: {
      JeFormItem: Form.Item,
      // JeInput: Input,
      // JeSwitch: Switch,
      JeSelect: Select,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      configInfo: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        pkName: config.pkName || '', //回显过滤字段
        queryField: config.queryField || '', //快查字段
        nodeField: config.nodeField || '', //快查取值字段
        showCloum: config.showCloum || '2', // 展示列数
        useBadge: config.useBadge, //数字提醒
        cascadeUseBadge: config.cascadeUseBadge || '', //级联数字提醒
        layoutStyle: config.layoutStyle || 'flowLayout', // 展示方式
      });

      //下拉框的数据
      const options = reactive({
        queryField: [],
        nodeField: [],
        gridLayoutConfig: [
          {
            label: '1',
            value: '1',
          },
          {
            label: '2',
            value: '2',
          },
          {
            label: '3',
            value: '3',
          },
          {
            label: '4',
            value: '4',
          },
          {
            label: '6',
            value: '6',
          },
        ],
        layoutStyle: [
          {
            label: '单行布局',
            value: 'singleLayout',
          },
          {
            label: '流式布局',
            value: 'flowLayout',
          },
          {
            label: '格栅布局',
            value: 'gridLayout',
          },
        ],
      });

      //根据configInfo的数据更新下拉框的数据
      const setOtherConfig = (configInfo, type) => {
        if (type) {
          formState.nodeField = '';
          formState.queryField = '';
        }
        const queryFieldArray = [];
        const nodeFieldArray = [];
        options.queryField = [];
        options.nodeField = [];
        if (isNotEmpty(configInfo)) {
          const configData = configInfo.split(',');
          //快查字段下拉框数据封装
          if (isNotEmpty(configData[1])) {
            const fieldCodes = configData[1].split('~');
            if (fieldCodes.length > 0) {
              //数据去重
              const newCodes = [...new Set(fieldCodes)];
              newCodes.forEach((code) => {
                queryFieldArray.push({ value: code, label: code });
              });
              if (queryFieldArray.length > 0) {
                options.queryField = queryFieldArray;
              }
            }
          }

          //快查取值字段
          if (isNotEmpty(configData[2])) {
            const nodeCodes = configData[2].split('~');
            if (nodeCodes.length > 0) {
              //数据去重
              const newCodes = [...new Set(nodeCodes)];
              newCodes.forEach((code) => {
                nodeFieldArray.push({ value: code, label: code });
              });
              if (nodeFieldArray.length > 0) {
                options.nodeField = nodeFieldArray;
              }
            }
          }
        }

        // 给快查取值字段赋默认值
        if (isEmpty(formState.nodeField) || isEmpty(formState.queryField)) {
          let num = 0;
          const codeArray = ['code', 'id', 'text'];
          for (let i = 0; i < codeArray.length; i++) {
            const item = codeArray[i];
            if (
              nodeFieldArray.some((node, index) => {
                num = index;
                return node.value == item;
              })
            ) {
              formState.nodeField = item;
              formState.queryField = queryFieldArray[num]?.value;
              return false;
            }
          }
        }
      };

      watch(
        () => props.configInfo,
        () => {
          setOtherConfig(props.configInfo);
        },
        { deep: true, immediate: true },
      );
      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );
      // 提醒弹窗
      const clickTipView = () => {
        Modal.alert({
          content: FORM_FILTER_REDIOCHECKBOX_CONFIG,
          title: '快查字段',
          icon: 'fal fa-info-circle',
          status: 'info',
          width: '460',
        });
      };

      //暴露表单值用于父组件赋值
      expose({
        formState,
        setOtherConfig,
      });

      return { formState, options, clickTipView };
    },
  });
</script>
<style lang="less" scoped>
  .radio-checkbox-config {
    .iconWrap {
      i {
        color: rgb(235, 235, 235);
        cursor: pointer;
        &:hover {
          color: #3265f5;
        }
      }
    }
  }
</style>
